<template>
	<div>
		<Roof>
			<div>购物车</div>
		</Roof>

		<van-row class="box" v-for="(item,index) in cart" :key='index'>
			
			<!-- 选择框 -->
			<van-col span="3">
				<van-checkbox class="tick" v-model="item.tick" checked-color="#B0352F" @change="tick(item.tick)"></van-checkbox>
			</van-col>
			
			<!-- 商品框 -->
			<van-col span="21">
				<van-card  :thumb="item.pic">
					
					<!-- 商品标题 -->
					<template #title>
						<div class="title"> {{ item.title }} </div>
					</template>
					<!-- 商品价格 -->
					<template #price>
						<div class="price"> ￥{{item.price}} </div>
					</template>
					<!-- 商品数量 -->
					<template #num>
						<van-stepper v-model="item.nub" theme="round" button-size="22" disable-input @change="nub(item.nub)"/>
					</template>
					
				</van-card>
			</van-col>
			
		</van-row>

		<van-submit-bar :price="total" button-text="提交订单">
			<van-checkbox @change='selectAll(checked)' v-model="checked" checked-color="#B0352F">全选</van-checkbox>
		</van-submit-bar>

	</div>
</template>

<script>
	import TopNavbar from '@/components/Home/TopNavbar'

	import Roof from '@/components/common/Roof'
	import {mapState,mapMutations,mapGetters} from 'vuex';


	export default {
		name: 'Cart',
		components: {
			TopNavbar,
			Roof
		},
		data() {
			return {
				checked:false,
				nubb:1,
			}
		},
		methods:{
			...mapMutations('shoppingCart',['nub','tick','selectAll'])
		},
		computed: {
			...mapState('shoppingCart', ['cart']),
			...mapGetters('shoppingCart',['total'])
		}
	}
</script>

<style scoped>
	::v-deep .van-nav-bar__content {
		background-color: #A32F2A;
	}

	::v-deep .van-icon-arrow-left,
	::v-deep .van-nav-bar__title,
	::v-deep .van-icon-search {
		color: #FFFFFF;
	}

	.box {
		margin-bottom: 0.125rem;
		background-color: #FAFAFA;
		position: relative;
	}

	.tick {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		left: 1.25rem;
	}

	.price {
		color: #EE0A24;
		font-size: 0.875rem;
		font-weight: 600;
	}
	.title {
		font-size: 17px;
		font-weight: 500;
	}
</style>
